﻿<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/8/22
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String openId = request.getSession().getAttribute("openId") + "";
%>
<!DOCTYPE html>
<html>
<head>
    <%--<meta http-equiv="Access-Control-Allow-Origin" content="open.weixin.qq.com">--%>
    <title>新途微助手</title>
    <%@include file="../../../include/header.jsp" %>
    <style>
        a:hover, a:visited, a:active, a:link {
            text-decoration: none;
            color: black;
        }

        #coupon, #shop {
            margin-left: 10%;
        }

        #select label {
            font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.4;
            font-weight: 100;
        }

        table {
            width: 100%;
        }

        table tr {
            width: 30%;
        }

        table tr td {
            text-align: center;
            height: 40px;
        }

        .row {
            background-color: #FFFFFF;
            margin-bottom: 10px;
        }

        .row .indexToolbar {
            text-align: center;
            line-height: 40px;
            height: 40px;
            margin: 10px 0;
            font-size: 14px;
            color: #4B4C4C;
        }

        .item-title {
            color: black;
            font-size: 18px;
            font-weight: normal;
            text-align: left;
            width: 50%;
        }

        .item-input {
            width: 50%;
        }

        .item-input input {
            text-align: right;
        }

        .list-block .beizhu::after {
            height: 0px;
        }

        .search-data-order-by {
            border-bottom: 1px solid #509AF1;
            font-weight: bold;
        }

        .app-search-toolbar {
            width: 60%;
            margin-left: 20%;
            background-color: #509AF1;
            font-size: 16px;
            font-family: PingFangSC-Light;
            color: white;
            height: 40px;
            line-height: 40px;
            border-radius: 2px;
        }

        ul, ol {
            padding: 0;
        }

        .banner {
            position: relative;
            overflow: auto;
            text-align: center;
        }

        .banner li {
            list-style: none;
        }

        .banner ul li {
            float: left;
        }

        .dots {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20px;
        }

        .dots li {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 4px;
            text-indent: -999em;
            border: 2px solid #fff;
            border-radius: 6px;
            cursor: pointer;
            opacity: .4;
            -webkit-transition: background .5s, opacity .5s;
            -moz-transition: background .5s, opacity .5s;
            transition: background .5s, opacity .5s;
        }

        .dots li.active {
            background: #fff;
            opacity: 1;
        }

        .arrow {
            position: absolute;
            top: 80px;
            z-index: 99999999
        }

        #al {
            left: 15px;
        }

        #ar {
            right: 15px;
        }

        body {
            background: #f0f0f0
        }

        .hot_search button {
            margin: 4px 6px;
        }

        .searchHistory i {
            width: 16px;
            height: 16px;
            background-image: url('../../../static/framwork7/dist/img/search-1x.png')
        }

    </style>
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Views -->
<div class="views">
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner">
                <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
                <div class="left">
                    <a class="link" onClick="targetPage()" id="back"><i class="icon icon-back"></i><span>返回</span></a>
                </div>
                <div class="center sliding">门票折券</div>
                <div class="right" id="sellerShop">
                    <a class="link" onClick="showSearchPage()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索</a>
                </div>

                <%--<div class="left">
                    <a class="link" onClick="targetPage()" id="back">&nbsp;&nbsp;&nbsp;返回</a>
                </div>
                <div class="center sliding" style="width:80%;height:100%;">
                    <input type="text" placeholder="请输入您想搜索的信息" style="width:100%;height:80%;border-radius: 38px;webkit-border-radius:38px;
                           moz-border-radius :38px;
                    background-color: #FFFFFF;
                    border: solid 0px #000;appearance:none;-moz-appearance:none;-webkit-appearance:none;
                    font-size: 20px;padding:0 30px;
                    "/>
                </div>
                <div class="right" id="sellerShop">
                    <a class="link" onClick="showSearchPage()">搜索</a>
                </div>--%>
            </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
            <!-- Page, "data-page" contains page name -->
            <div class="page" data-page="index">
                <!-- Scrollable page content -->
                <div class="page-content">

                    <div style="width:100%;height:100px;background-color:#509AF1;padding:30px 10%">
                        <div class="dropdown" style="width:100%;height:40px;text-align: center;">
                            <%--   <select class="btn btn-default dropdown-toggle" type="button" id="cityId"
                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                       style="width: 100%;height:100%;border-radius: 38px;webkit-border-radius:38px;
                                       moz-border-radius :38px;
                                       background: url(../../../static/image/ticket/city.png)  no-repeat 25px center , url(../../../static/image/ticket/select-bottom.png)  no-repeat 95% center;
                                       background-color: #FFFFFF;
                                       border: solid 0px #000;appearance:none;-moz-appearance:none;-webkit-appearance:none;
                                       font-size: 20px;
                                       /*background: url(../../../static/image/ticket/city.png) no-repeat scroll right center transparent;*/
                                       " onchange="App.cityInputCenter()">
                               </select>--%>
                            <!-- Single button -->
                            <div class="btn-group" style="width:100%">
                                <input type="hidden" id="cityId" value="1"/>
                                <button type="button" id="cityName" class="btn btn-default dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        style="width: 100%;height:100%;border-radius: 38px;webkit-border-radius:38px;
                                                moz-border-radius :38px;
                                                background: url(${cdnContentPath}/static/image/ticket/city.png)  no-repeat 25px center , url(${cdnContentPath}/static/image/ticket/select-bottom.png)  no-repeat 95% center;
                                                background-color: #FFFFFF;
                                                border: solid 0px #000;appearance:none;-moz-appearance:none;-webkit-appearance:none;
                                                font-size: 20px;
                                                /*background: url(../../../static/image/ticket/city.png) no-repeat scroll right center transparent;*/
                                                ">皇后镇
                                </button>
                                <ul class="dropdown-menu" style="width:100%" id="cityList">
                                    <%--<li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>--%>
                                    <li onclick="changeCity('1','皇后镇')"><a href="#">皇后镇</a></li>
                                    <li onclick="changeCity('10','瓦纳卡')"><a href="#">瓦纳卡</a></li>
                                    <li onclick="changeCity('18','蒂阿瑙')"><a href="#">蒂阿瑙</a></li>
                                    <li onclick="changeCity('17','格雷茅斯')"><a href="#">格雷茅斯</a></li>
                                    <li onclick="changeCity('8','尼尔森')"><a href="#">尼尔森</a></li>
                                    <li onclick="changeCity('19','库克山')"><a href="#">库克山</a></li>
                                    <li onclick="changeCity('3','罗托鲁瓦')"><a href="#">罗托鲁瓦</a></li>
                                    <li onclick="changeCity('2','奥克兰')"><a href="#">奥克兰</a></li>
                                    <li onclick="changeCity('20','凯库拉')"><a href="#">凯库拉</a></li>
                                    <li onclick="changeCity('7','基督城')"><a href="#">基督城</a></li>
                                    <li onclick="changeCity('5','惠灵顿')"><a href="#">惠灵顿</a></li>
                                    <li onclick="changeCity('21','坎特伯雷')"><a href="#">坎特伯雷</a></li>
                                    <li onclick="changeCity('22','奥马鲁')"><a href="#">奥马鲁</a></li>
                                    <li onclick="changeCity('6','但尼丁')"><a href="#">但尼丁</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="content-block">
                        <input type="hidden" id="queryType" value="1"/>
                        <table>
                            <tr>
                                <td><img src="${cdnContentPath}/static/image/ticket/ticket-true.png" width="60%"/></td>
                                <td><img src="${cdnContentPath}/static/image/ticket/shop-coupon-false.png" width="60%"/>
                                </td>
                                <td><img src="${cdnContentPath}/static/image/ticket/repast-coupon-false.png"
                                         width="60%"/></td>
                            </tr>
                            <tr id="img-font">
                                <td class="selected-img">门票</td>
                                <td>购物优惠券</td>
                                <td>餐饮优惠券</td>
                            </tr>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar" style="height:60px;" id="index-tool">
            <div class="toolbar-inner" style="background-color:white;">
                <a class="button app-search-toolbar" id="toolbar-button" onclick="handler()">搜索</a>
            </div>
        </div>
    </div>
</div>
<%@include file="../../../include/footer.jsp" %>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="${cdnContentPath}/static/template7/dist/template7.js"></script>
<script type="text/javascript" src="${relativePath}/view/menu2/ticket/my-app.js"></script>

<script>
    var myApp = new Framework7();
    var $$ = Framework7.$;
    var mainView = myApp.addView('.view-main');

    //控制城市选择空间居中显示，text-indent: 50px;
    App.cityInputCenter();
    $(function () {
        /* $.post(Constant.ctx("/mulanweb/common/city/search"), {PageSize: 20, PageNumber: 1}, function (info) {
         var option = [];
         for (var i in info.DataList) {
         //option[i] = '<option value="'+info.DataList[i].Id+'">'+info.DataList[i].NameCn+'</option>';
         option[i] = ' <li onclick="changeCity(\'' + info.DataList[i].Id + '\',\'' + info.DataList[i].NameCn + '\')"><a href="#">' + info.DataList[i].NameCn + '</a></li>';
         if (i == 0 && option[0]) {
         $("#cityName").html(info.DataList[i].NameCn);
         $("#cityId").val(info.DataList[i].Id);
         }
         }
         $("#cityList").html(option.join(" "));
         });*/

        $("table tr td img").on("click", function () {
            var src = $(this).attr("src");
            if (src.indexOf("true") != -1) {
                ///$(this).attr("src",src.replace("true","false"));
            } else {
                var label = $("table tr td img");
                for (var tt = 0; tt < label.length; tt++) {
                    var ttSrc = $(label[tt]).attr("src");
                    if (ttSrc.indexOf("true") != -1) {
                        $(label[tt]).attr("src", ttSrc.replace("true", "false"));
                    }
                }
                $(this).attr("src", src.replace("false", "true"));
                var test = $(this).parent().next();
                var tt = 2;
                while (test.html()) {
                    tt--;
                    test = test.next();
                }
                $("#img-font td").removeClass("selected-img");
                $("#img-font td:eq(" + tt + ")").addClass("selected-img");
            }
        });

        var para = {
            url: location.href.split('#')[0],
        }
        var url = "${ctx}/mulanweb/wecharPay/getSignature";
        $.ajax({
            url: url,
            async: true,
            type: "post",
            dataType: "json",
            data: para,
            success: function (data) {
                var info = data.DataList;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wx1a5d74a8c7cb135e', // 必填，公众号的唯一标识
                    timestamp: info.timestamp, // 必填，生成签名的时间戳
                    nonceStr: info.noncestr, // 必填，生成签名的随机串
                    signature: info.signature,// 必填，签名，见附录1
                    jsApiList: [
                        'getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            }
        });

        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            alert("配置失败");
            console.info(res);
        });
        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            console.info(wx);
        });
    })

    function handler() {
        var pageName = myApp.mainView.activePage.name;
        if (pageName == 'index') {
            var img = $("table tr td img");
            for (var i = 0; i < img.length; i++) {
                var src = $(img[i]).attr("src");
                if (src.indexOf("true") != -1) {
                    if (src.indexOf("ticket-") != -1) {
                        //表示查询门票
                        $("#queryType").val(1);
                    } else if (src.indexOf("shop-") != -1) {
                        //表示查询购物优惠券
                        $("#queryType").val(3);
                    } else if (src.indexOf("repast-") != -1) {
                        //表示查询餐饮优惠券
                        $("#queryType").val(2);
                    }
                }
            }
            var cityId = $("#cityId").val();
            var typeId = $("#queryType").val();
            App.showLoading();
            mainView.router.load({url: "../search-data.jsp?cityId=" + cityId + "&typeId=" + typeId});
            //$("#toolbar-button").attr("href", "../search-data.jsp?cityId=" + cityId + "&typeId=" + typeId);
            mainView.hideToolbar();
        }
        else if (pageName == 'contentSearchTagPage') {
            var cityId = $("#cityId").val();
            var typeId = $("#typeIdInput").val();
            App.showLoading();
            if (!searchPara.searchKeyWord) {
                App.hideLoading();
                alert("请输入查询内容");
                return;
            }
            mainView.router.load({url: "keyword-search-data.jsp?typeId=" + typeId});
            //$("#toolbar-button").attr("href", "../search-data.jsp?cityId=" + cityId + "&typeId=" + typeId);
        }
    }

    function targetPage() {
        var pageName = myApp.mainView.activePage.name;
        if (pageName == 'index') {
            WeixinJSBridge.call('closeWindow');
        } else if (pageName == 'keyWordSearchPage') {
            menuController.keyWordSearchTagPage();
            mainView.router.back();
        } else if (pageName == 'search' || pageName === 'contentSearchTagPage') {
            menuController.indexDefaultNavbar()
            mainView.router.back();
        } else if (pageName === 'detail') {
            setTimeout(function () {
                mainView.router.back();
                menuController.indexNoneSearchNavbar();
            }, 500)
        } else {
            mainView.router.back();
        }
    }
    function changeCity(id, cityName) {
        $("#cityId").val(id);
        $("#cityName").html(cityName);
    }

    function showSearchPage() {
        mainView.router.load({url: "content-search-page.jsp"});
    }
</script>
</body>
</html>
